<template>
  <div class="book-chapter">
    <article v-html="chapter.content"></article>

    <div class="submit" @click.stop="finish" v-if="!finish_status">
      <span>已读完</span>
    </div>
    <div class="submit" @click.stop="finish" v-else>
      <span>已完成答题,再来一次</span>
    </div>
    
    <ul class="tab-bar">
      <div class="sent" @click.stop="goBack">
        <i class="icon-sent"/>
      </div>
      <li class="index">
        <i class="icon-price"/> {{student.gold_coin}}
      </li>
      <li class="index">
        <i class="icon-count"/> {{student.word_count}}
      </li>
    </ul>
    <!-- <i class="icon-back" @click.stop="goBack"/> -->
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  components: {},
  data() {
    return {
      chapter: {},
      read_state: "unread", //阅读状态 unread 未读 reading 阅读中 read 已读
      finish_status: false //是否已完成答题
    };
  },
  props: {},
  watch: {},
  methods: {
    goBack() {
      this.$router.back();
    },
    finish() {
      document.title = "课外读物";
      //若未阅读过该章节，才进行数据库操作
      if (this.read_state != "read") {
        this.$$api_book_update_student_chapter({
          data: {
            chapter_id: this.chapter.id,
            student_id: this.student.id,
            data: {
              read_state: "read"
            }
          }
        });
        this.$$api_book_update_student_book({
          data: {
            book_id: this.chapter.book_id,
            student_id: this.student.id,
            data: {
              read_chapter_count: this.chapter.chapter_index,
              chapter_index: this.chapter.chapter_index,
              read_words_count: this.chapter.word_count
            }
          }
        });

        //修改学生已阅读字数
        this.$$api_user_update_student_words({
          data: {
            student_id: this.student.id,
            read_word_count: this.chapter.word_count
          },
          fn: res => {
            //更新学生信息
            this.$$api_user_query_default_student({
              data: this.userID,
              fn: student =>
                this.$store.dispatch("update_default_student", student)
            });
          }
        });
      }
      this.$router.replace(`/question?id=${this.chapter.id}`);
    }
  },
  filters: {},
  computed: {
    ...mapGetters(["userID", "student"])
  },
  created() {},
  mounted() {
    new Promise(resolve => {
      this.$$api_book_chapterDetail({
        data: this.$router.currentRoute.query.id,
        fn: res => {
          this.chapter = res;
          document.title = this.chapter.title;
          resolve(res);
        }
      });
    })
      .then(chapter => {
        return new Promise(resolve => {
          //查询章节状态。包含答题状态，是否存在改章节
          this.$$api_book_chapterStatus({
            data: {
              chapter_id: this.$router.currentRoute.query.id,
              student_id: this.student.id
            },
            fn: res => {
              this.read_state = res.read_state;
              this.finish_status = res.finish_question;
              resolve(res);
            }
          });
        });
      })
      .then(res => {
        //如果未读该章节，新增阅读章节，阅读状态为正在阅读
        if (this.read_state == "unread") {
          this.$$api_book_save_student_chapter({
            data: {
              chapter_id: this.chapter.id,
              book_id: this.chapter.book_id,
              user_id: this.userID,
              student_id: this.student.id,
              title: this.chapter.title,
              word_count: this.chapter.word_count,
              gold_coin: this.chapter.gold_coin,
              get_gold_coin: 0,
              read_state: "reading",
              finish_question: false
            }
          });
        }
        console.log("res", res);
      });
  },
  destroyed() {}
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/const.scss";
@import "~@/assets/scss/mixin.scss";

.book-chapter {
  background: $app-background-color;
  padding-bottom: 60px;
  article {
    padding: 20px;
    padding-top: 50px;
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    color: rgba(102, 102, 102, 1);
    letter-spacing: 2px;
    line-height: 20px;
  }

  .tab-bar {
    @include onepx();
    position: fixed;
    z-index: 100;
    bottom: 0;
    width: 100%;
    height: 50px;
    text-align: center;
    display: flex;
    flex-direction: row;
    background-color: #ffffff;
    // box-shadow: 0px 1px 10px 1px #888;
    .sent {
      width: 48px;
      font-size: 30px;
      color: #65acdf;
      line-height: 42px;
      border-right: 1px solid rgba(7, 17, 27, 0.1);
    }
    li {
      flex: 1;
      // color: #999;
      display: block;
      color: #65acdf;
      line-height: 50px;
      i {
        font-size: 18px;
      }
      span {
        display: block;
        font-size: 12px;
      }
      &:first-child {
        border-right: 1px solid rgba(7, 17, 27, 0.1);
      }
    }

    li.router-link-active {
      color: #018cfc;
      transform: scale(1.1);
    }
  }
  .icon-back {
    position: fixed;
    top: 10px;
    left: 10px;
    font-size: 40px;
    color: #999999;
  }
  .submit {
    height: 36px;
    line-height: 36px;
    border: 1px solid lightgray;
    text-align: center;
    width: 90%;
    margin: 10px 5%;
  }
}
</style>

